<template>
  <div class="main-border">
    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">上线的物品</el-menu-item>
      <el-menu-item index="2">下架的物品</el-menu-item>
      <el-button type="text" @click="openAdd()">发布物品</el-button>
    </el-menu>

    <el-table v-if="this.mode == 1"
              :data="onlineGoods"
              stripe
              style="width: 100%;color: #5a5c61;">
      <el-table-column
          prop="releaseTime"
          label="发布日期"
          width="200">
      </el-table-column>
      <el-table-column
          prop="teaName"
          label="茶物品名称"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          prop="user.nickname"
          label="发布用户"
          show-overflow-tooltip
          min-width="100"
          width="100">
      </el-table-column>
      <el-table-column
          prop="teaPrice"
          label="价格"
          show-overflow-tooltip
          min-width="100"
          width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="openEdit(scope.$index)"> 修改
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="makeOfflineGoods(scope.$index)"> 违规下架
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-show="this.mode == 2"
              :data="OfflineGoods"
              stripe
              style="width: 100%;color: #5a5c61;">
      <el-table-column
          prop="releaseTime"
          label="发布日期"
          width="200">
      </el-table-column>
      <el-table-column
          prop="teaName"
          label="物品名称"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          prop="user.nickname"
          label="发布用户"
          show-overflow-tooltip
          min-width="100"
          width="100">
      </el-table-column>
      <el-table-column
          prop="teaPrice"
          label="价格"
          show-overflow-tooltip
          min-width="100"
          width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="resUpGoods(scope.$index)">重新上架
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteGoods(scope.$index)">永久删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="8"
          background
          layout="prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--  新增物品弹窗  -->
    <el-dialog
        :title="this.title"
        :visible.sync="dialogVisible"
        width="60%">
      <el-form class="release-tea-container-form">
        <div class="release-tip">物品名称</div>
        <el-input placeholder="请输入物品名称" v-model="teaItemInfo.teaName"
                  maxlength="30"
                  show-word-limit>
        </el-input>
        <div class="release-tip">物品介绍</div>
        <el-input
            class="release-tea-detiles-text"
            type="textarea"
            autosize
            placeholder="请输入物品的详细介绍..."
            v-model="teaItemInfo.teaDetails"
            maxlength="1000"
            show-word-limit>
        </el-input>
        <div style="display: flex; justify-content: space-between;">
          <div>
            <div class="release-tip">物品类别</div>
            <el-select v-model="teaItemInfo.teaLabel" placeholder="请选择类别">
              <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="width: 300px;">
            <div class="release-tip">物品价格</div>
            <div>
              <el-input-number v-model="teaItemInfo.teaPrice" :precision="2" :step="10"
                               :max="10000000"></el-input-number>
            </div>
          </div>

        </div>
        <div class="release-tea-container-picture">
          <div class="release-tea-container-picture-title">上传照片</div>

          <el-upload
              action="http://localhost:9321/file/"
              :on-preview="fileHandlePreview"
              :on-remove="fileHandleRemove"
              :on-success="fileHandleSuccess"
              :show-file-list="showFileList"
              :limit="1"
              :on-exceed="handleExceed"
              accept="image/*"
              drag
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div class="picture-list">
            <el-image style="width: 600px;height:400px; margin-bottom: 2px;" fit="contain"
                      v-for="(img,index) in imgList" :src="$store.state.baseApi + img"
                      :preview-src-list="imgList" :key="index"></el-image>
          </div>
          <el-dialog :visible.sync="imgDialogVisible">
            <img width="100%" :src="$store.state.baseApi + dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import options from "@/components/common/country-data";

export default {
  name: "teaGoods",
  data() {
    return {
      title: '',
      mode: 1,
      nowPage: 1,
      total: 0,
      onlineGoods: [],
      OfflineGoods: [],
      dialogVisible: false,
      teaItemInfo: {
        teaName: '',
        teaDetails: '',
        pictureList: '',
        teaPrice: 0,
        teaPlace: '',
        teaLabel: ''
      },
      imgDialogVisible: false,
      dialogImageUrl: '',
      showFileList: true,
      options: options,
      selectedOptions: [],
      options2: [],
      imgList: [],
    }
  },
  created() {
    this.getOnlineGoods();
  },
  methods: {
    handleCurrentChange(val) {
      this.nowPage = val;
      if (this.mode == 1) {
        this.getOnlineGoods();
      }
      if (this.mode == 2) {
        this.getOfflineGoods();
      }
    },
    handleSelect(val) {
      if (this.mode !== val) {
        this.mode = val;
        if (val == 1) {
          this.nowPage = 1;
          this.getOnlineGoods();
        }
        if (val == 2) {
          this.nowPage = 1;
          this.getOfflineGoods();
        }
      }
    },
    makeOfflineGoods(i) {
      this.$api.updateGoods({
        id: this.onlineGoods[i].id,
        status: 2
      }).then(res => {
        if (res.status_code == 1) {
          this.getOnlineGoods();
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    editOfflineGoods(i) {

    },
    deleteGoods(i) {
      this.$api.updateGoods({
        id: this.OfflineGoods[i].id,
        status: 0
      }).then(res => {
        if (res.status_code == 1) {
          this.getOfflineGoods();
        } else {
          this.$message.error(res.msg)
        }

      }).catch(e => {
        console.log(e)
      })
    },
    // 重新上架
    resUpGoods(i) {
      this.$api.updateGoods({
        id: this.OfflineGoods[i].id,
        status: 1
      }).then(res => {
        if (res.status_code == 1) {
          this.getOfflineGoods();
        } else {
          this.$message.error(res.msg)
        }

      }).catch(e => {
        console.log(e)
      })
    },
    getOnlineGoods() {
      this.$api.getGoods({
        status: 1,
        page: this.nowPage,
        nums: 8
      }).then(res => {
        if (res.status_code == 1) {
          this.onlineGoods = res.data.list;
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    getOfflineGoods() {
      this.$api.getGoods({
        status: 2,
        page: this.nowPage,
        nums: 8
      }).then(res => {
        if (res.status_code == 1) {
          this.OfflineGoods = res.data.list;
          this.total = res.data.count;
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleClose() {
      this.teaItemInfo.pictureList = JSON.stringify(this.imgList);
      console.log(this.teaItemInfo);
      if (this.teaItemInfo.teaName &&
          this.teaItemInfo.teaDetails &&
          this.teaItemInfo.teaLabel &&
          this.teaItemInfo.teaPrice) {
        console.log(this.teaItemInfo.id)
        if (!this.teaItemInfo.id){
          this.$api.addteaItem(this.teaItemInfo).then(res => {
            if (res.status_code === 1) {
              this.$message({
                message: '发布成功！',
                type: 'success'
              });
              console.log(res.data);
              this.dialogVisible = false;
              this.teaItemInfo = {
                teaName: '',
                teaDetails: '',
                pictureList: '',
                teaPrice: 0,
                teaPlace: '',
                teaLabel: ''
              }
              this.imgList = []
              this.selectedOptions = []
              this.dialogImageUrl = ''
              this.getOnlineGoods()
            } else {
              this.$message.error('发布失败！' + res.msg);
            }
          }).catch(e => {
            this.$message.error('请填写完整信息');
          })
        }else{
          this.$api.updateteaItem(this.teaItemInfo).then(res => {
            if (res.status_code === 1) {
              this.$message({
                message: '修改成功！',
                type: 'success'
              });
              console.log(res.data);
              this.dialogVisible = false;
              this.teaItemInfo = {
                teaName: '',
                teaDetails: '',
                pictureList: '',
                teaPrice: 0,
                teaPlace: '',
                teaLabel: ''
              }
              this.imgList = []
              this.selectedOptions = []
              this.dialogImageUrl = ''
              this.getOnlineGoods()
            } else {
              this.$message.error('修改失败！' + res.msg);
            }
          })
        }
      } else {
        this.$message.error('请填写完整信息！');
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`限制10张图片，本次选择了 ${files.length} 张图，共选择了 ${files.length + fileList.length} 张图`);
    },
    fileHandleRemove(file, fileList) {
      console.log(file, fileList);
      for (let i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i] === file.response.data) {
          this.imgList.splice(i, 1);
        }
      }
    },
    fileHandlePreview(file) {
      console.log(file);
      this.dialogImageUrl = file.response.data;
      this.imgDialogVisible = true;
    },
    fileHandleSuccess(response, file, fileList) {
      this.dialogImageUrl = '';
      this.imgList = [];
      console.log("file:", response, file, fileList);
      this.imgList.push(response.data);
    },
    listType() {
      this.$api.listType({begin: 0, size: 999}).then((res) => {
        for (var i = 0; i < res.data.length; ++i) {

          this.options2.push({
            value: res.data[i].id,
            label: res.data[i].name
          })
        }
      })
    },
    //   打开新增窗口
    openAdd() {
      this.dialogVisible = true;
      this.title = "发布物品";
      this.teaItemInfo = {};
      this.dialogImageUrl = '';
      this.imgList = [];
    },
    //   打开修改窗口
    openEdit(i) {
      this.dialogImageUrl = '';
      this.imgList = [];
      this.dialogVisible = true;
      this.title = "修改物品";
      this.$api.getteaItem({
        id: this.onlineGoods[i].id,
      }).then(res => {
        console.log(res.data);
        this.teaItemInfo = res.data;
        let pictureList = JSON.parse(res.data.pictureList);
        this.dialogImageUrl = pictureList[0];
        console.log(this.dialogImageUrl)
        this.imgList.push(this.dialogImageUrl);
      })
    }
  },
  mounted() {
    this.listType()
  }

}
</script>

<style scoped>

.main-border {
  background-color: #FFF;
  padding: 10px 30px;
  box-shadow: 0 1px 15px -6px rgba(0, 0, 0, .5);
  border-radius: 5px;
}

.block {
  display: flex;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 10px;
  width: 100%;
}

.release-tea-container-form {
  padding: 0 180px;
}

.release-tea-detiles-text {
  margin: 20px 0;
}

.release-tea-place {
  margin-bottom: 15px;
}

.release-tip {
  color: #555555;
  float: left;
  padding-right: 5px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}

.release-tea-container-picture {
  width: 500px;
  height: 400px;
  margin: 20px 0;

}

.release-tea-container-picture-title {
  margin: 10px 0;
  color: #555555;
  font-size: 14px;
}

.picture-list {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
}
</style>